<template>
    <div class="use-next-layout group/body">
        <div v-if="isMobileDevice===false">
            <BaHeader v-if="false"/>
            <div style="height: 100vh;background: #EDF1F4;">
                <div class="login pc-loginbox">
                    <div class="login-box">
                        <div class="head">
                            <img src="~assets/loginbg.png" alt=""/>
                        </div>
                        <div class="form">
                            <div class="content" >
                                <div class="content" v-if="state.tab=='captchaLogin'">
                                    <h2 style="margin-bottom: 31px">扫码登录</h2>
                                    <div class="login-qrcode__container" style="display: flex;justify-content: space-around;" >
                                        <div class="login-qrcode__container__qrcode" >
                                            <img style="width: 220px;"
                                                 src=""
                                                 alt="http://passport.youzan.com/scan-login?token=YZ7F4620EA57B9411CA6982AD2B1E8462B&amp;fromSource=SOURCE_PC"
                                                 data-v-826f4f48="">
                                            <div class="warning warning--show">
                                                <i class="zenticon zenticon-refresh refresh__icon" ></i>
                                                <p data-v-826f4f48="">二维码已失效</p>
                                            </div>
                                        </div>
                                        <div class="zent-swiper__container" style="margin-left: 20px" >
                                            <el-image style="width: 163px;" src="https://img01.yzcdn.cn/public_files/7d4b1fdf8259420218aacaa82af59dbe.png!large.png"/>
                                        </div>
                                    </div>
                                    <div class="attention-tips">微信扫一扫，关注公众号</div>
                                    <div style="margin: 0px auto;text-align: center;margin-top: 60px;">
                                        <el-button size="large"  @click.stop="switchTab('mobileLogin')">账号登录</el-button>
                                    </div>
                                </div>
                                <div class="content" v-else-if="state.tab=='mobileLogin'" style="padding-top: 110px;">
                                    <el-form @keyup.enter="onLoginSubmitPre()" ref="loginRef" label-position="left" :rules="loginRules" label-width="80"  size="large" :model="state.login">
                                        <el-form-item prop="username" label="用户名">
                                            <el-input
                                                ref="usernameRef"
                                                type="text"
                                                clearable
                                                v-model="state.login.username"
                                                placeholder="请输入手机号"
                                            >
                                                <template #prefix>
                                                    <Icon name="fa fa-user" v-if="false" class="form-item-icon" size="16"
                                                          color="var(--el-input-icon-color)"/>
                                                </template>
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item prop="password" label="密码">
                                            <el-input
                                                ref="passwordRef"
                                                v-model="state.login.password"
                                                type="password"
                                                placeholder="请输入密码"
                                                show-password
                                            >
                                                <template #prefix>
                                                    <Icon name="fa fa-unlock-alt" v-if="false" class="form-item-icon" size="16"
                                                          color="var(--el-input-icon-color)"/>
                                                </template>
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-checkbox v-model="state.login.keep" label="记住"
                                                         size="default"></el-checkbox>
                                        </el-form-item>
                                            <el-button
                                                @click="onLoginSubmitPre"
                                                :loading="state.loading.login"
                                                round
                                                type="primary"
                                                size="large"
                                                style="    width: 100%;
            margin-top: 20px;
            border-color: #2642bc;
            height: 35px;
            background: #2441BF;
            border-radius: 10px;
            font-weight: 600;
            font-size: 12px;
            color: #FFFFFF;"
                                                class=""
                                                :class="state.loading.login?'zent-btn-disabled':''"
                                            >
                                              登录
                                            </el-button>
                                            <p style="font-size: 18px;color: #999999;margin: 20px auto;cursor: pointer" @click.stop="switchTab('captchaLogin')">二维码登录</p>
                                    </el-form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="account" v-if="false">
                <div class="account__container">
                    <div class="account__container__left">
                        <div class="login-container" v-if="state.tab == 'mobileLogin'">
                            <div class="switch-type" @click="switchTab('captchaLogin')">
                                <p class="switch-type__tip">
                                    <img
                                        src="https://img01.yzcdn.cn//public_files/982ce7a51441adc9bdad447d53d3de0d.png!origin.png"/>
                                    <span>扫码登录更便捷</span>
                                </p>
                                <img class="js-tab-scan-code-login" src="~/assets/icons/toogle_qr_code-8761ac48da.svg"/>
                            </div>
                            <div class="login-container__header">
                                <span class="js-tab-captcha-login" :class="state.actionType == 'captcha' ? 'bold' : ''"
                                      @click="switchLoginType('captcha')">验证码登录</span>
                                <span class="js-tab-password-login" :class="state.actionType == 'password' ? 'bold' : ''"
                                      @click="switchLoginType('password')">密码登录</span>
                            </div>
                            <el-form class="zent-form zent-form--horizontal" data-cp-zv="2.3.0"  ref="loginRef"
                                     @keyup.enter="onLoginSubmitPre"  :rules="loginRules"  :model="state.login">
                                <div class="account-input">
                                    <div class="zent-input-wrapper zent-input--size-normal account-input__input"
                                         data-zv="v10.0.11">
                                        <input placeholder="请输入手机号"
                                            maxlength="11"
                                            type="text"
                                            class="zent-input"
                                            data-zv="v10.0.11"
                                           v-model="state.login.username"
                                        />
                                    </div>
                                    <p class="account-input__warning">验证完成后，可使用该手机号登录或找回密码</p>
                                </div>
                                <div class="account-password" v-if="state.actionType == 'password'">
                                    <div class="zent-input-wrapper zent-input--size-normal account-password__input account-password__input--show-forget"
                                        data-zv="v10.0.11">
                                        <input name="password" :type="passType?'password':'text'"  v-model="state.login.password" placeholder="输入登录密码"
                                                                  class="zent-input" data-zv="v10.0.11" value="">
                                    </div>
                                    <span  class="account-password__icon  forget-pass-icon" :class="passType?'account-password__icon--open':'account-password__icon--hide'" @click="showPass"></span>
                                    <a class="account-password__forget-password" href="/retrieve-pass">忘记密码</a>
                                    <p class="account-password__error"></p>
                                </div>
                                <div class="account-captcha" v-else>
                                    <div class="zent-input-wrapper zent-input--size-normal account-captcha__input"
                                         data-zv="v10.0.11">
                                        <input  v-model="state.login.smscode"
                                            name="captcha"
                                            maxlength="6"
                                            type="text"
                                            placeholder="输入短信验证码"
                                            autocomplete="off"
                                            class="zent-input"
                                            data-zv="v10.0.11"
                                        />
                                    </div>
                                    <div class="account-captcha__btn js-get-identify-code">获取验证码</div>
                                    <p class="account-captcha__warn"></p>
                                </div>
                                <div class="login-container__auto">
                                    <el-checkbox v-model="state.login.keep" :label="'保持登录'" size="default"></el-checkbox>
                                    <client-only v-if="false">
                                        <div
                                            v-if="state.accountVerificationType.length > 0"
                                            @click="state.showRetrievePasswordDialog = true"
                                            class="forgot-password"
                                        >
                                            忘记密码？
                                        </div>
                                    </client-only>
                                    <div>
                                        <label class="zent-checkbox-wrap login-container__protocol__check shake-motion"
                                               data-zv="v10.0.11">
                                            <span class="zent-checkbox" data-zv="v10.0.11">
                                                <span class="zent-checkbox-inner" data-zv="v10.0.11"></span>
                                                <input type="checkbox" data-zv="v10.0.11"/>
                                            </span>
                                            <div class="zent-checkbox-label" data-zv="v10.0.11">
                                                阅读并同意
                                                <a target="_blank" rel="noopener noreferrer"
                                                   href="/examples/agreement">用户协议</a>
                                                <span>、</span>
                                                <a target="_blank" rel="noopener noreferrer"
                                                   href="/examples/statement">隐私声明</a>
                                            </div>
                                        </label>
                                    </div>
                                    <el-button
                                        @click="onLoginSubmitPre"
                                        :loading="state.loading.login"
                                        round
                                        type="primary"
                                        size="large"
                                        class="zent-btn-primary zent-btn-large zent-btn-block zent-btn-border-transparent zent-btn login-container__btn js-login-verify-code-btn clickable-button-disabled "
                                        :class="state.loading.login?'zent-btn-disabled':''"
                                        data-zv="v10.0.11">
                                        <span data-zv="v10.0.11">登&nbsp;录</span>
                                    </el-button>
                                    <div class="login-container__links">
                                        <div class="login-container__links__actions">
                                            没有账号，<a class="js-goto-register-btn" href="/register">免费注册</a>
                                        </div>
                                    </div>
                                </div>
                            </el-form>
                        </div>
                        <div class="login-qrcode" v-if="state.tab == 'captchaLogin'">
                            <div class="switch-type" @click="switchTab('mobileLogin')">
                                <p class="switch-type__tip">
                                    <span>账号登录</span>
                                </p>
                                <img class="js-tab-scan-code-login" src="~/assets/icons/toogle_pc_code-efa39f77bd.png"/>
                            </div>
                            <div class="login-qrcode__container">
                                <div class="login-qrcode__container__qrcode">
                                    <img
                                        src=""
                                        alt="http://passport.youzan.com/scan-login?token=YZ7F4620EA57B9411CA6982AD2B1E8462B&amp;fromSource=SOURCE_PC"
                                    />
                                    <div class="warning warning--show">
                                        <i class="zenticon zenticon-refresh refresh__icon" data-zv="v10.0.11"></i>
                                        <p>二维码已失效</p>
                                    </div>
                                </div>
                                <div class="login-qrcode__container__banner">
                                    <div class="zent-swiper" data-zv="v10.0.11">
                                        <div class="zent-swiper__container" data-zv="v10.0.11">
                                            <img
                                                src="https://img01.yzcdn.cn/public_files/7d4b1fdf8259420218aacaa82af59dbe.png!large.png">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="login-qrcode__register">没有账号，<a class="login-qrcode__register__link"
                                                                            href="/register">免费注册</a></div>
                        </div>
                    </div>
                    <a class="account__container__right" href="/" target="_blank" rel="noopener noreferrer">
                        <img class="account__container__right__cover" src="https://iph.href.lu/380x520" alt=""
                             loading="lazy"/>
                    </a>
                </div>
            </div>
            <BaFooter/>
        </div>
        <div v-else>
            <div style="background: #1b65ed;height: 175px;color:#fff;padding: 40px">
                <div><h1 style="font-size: 35px;    font-weight: 400;margin-bottom: 4px;">欢迎登录</h1></div>
                <div><h4 style="font-size: 16px;    font-weight: 400;    font-weight: 400;">政企专属智能体</h4></div>
            </div>
            <div class="mob-loginbox" style="">
                <div v-if="state.tab == 'mobileLogin'">
                    <el-form @keyup.enter="onLoginSubmitPre()" ref="loginRef" label-position="left" :rules="loginRules"  size="large" :model="state.login">
                    <el-form-item prop="mobile" >
                        <el-input
                            ref="usernameRef"
                            type="text"
                            clearable
                            v-model="state.login.mobile"
                            placeholder="请输入手机号"
                        >
                            <template #prefix>
                                <Icon name="fa fa-user" class="form-item-icon" size="16"
                                      color="var(--el-input-icon-color)"/>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password" >
                        <el-input
                            ref="passwordRef"
                            v-model="state.login.password"
                            type="password"
                            placeholder="请输入密码"
                            show-password
                        >
                            <template #prefix>
                                <Icon name="fa fa-unlock-alt" class="form-item-icon" size="16"
                                      color="var(--el-input-icon-color)"/>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item v-if="false">
                        <el-checkbox v-model="state.login.keep" label="记住"
                                     size="default"></el-checkbox>
                    </el-form-item>
                    <div style="font-size: 16px;color: #066bf7;"
                        class="forgot-password"
                         @click="findPassword"
                    >
                        忘记密码？找回密码
                    </div>
                    <el-button
                        @click="onLoginSubmitPre"
                        :loading="state.loading.login"
                        round
                        type="primary"
                        size="large"
                        style="width: 100%;margin-top: 105px;border-color: #2642bc;height:45px;background: #066bf7;border-radius: 10px;font-weight: 600;font-size: 16px;color: #FFFFFF;"
                        :class="state.loading.login?'zent-btn-disabled':''"
                    >
                        登录
                    </el-button>
                        <div style="height: 17px;font-size: 12px;font-weight: 200;color: #999999;    text-align: center;    margin-top: 10px;">
                            *登录即表示同意<a href="javascript:;" title="用户协议">《用户协议》</a>
                        </div>
                        <div style="margin:0 auto;text-align: center;">
                        <el-button class="register-find-btn" style="width: 125px;margin-top: 55px;background: #ffffff;border: 1px solid #066bf7;border-radius: 39px;" round
                                   type="primary" plain
                                   size="large" @click="registerShow">注册</el-button>
                        </div>
                </el-form>
                </div>
                <div v-if="state.tab == 'Register'">
                    <el-form
                        ref="retrieveFormRef"
                        @keyup.enter="onRegisterSubmitPre()"
                        :rules="registerRules"
                        :model="state.register"
                    >
                        <el-form-item v-show="false">
                            <el-radio-group v-model="state.register.registerType" >
                                <el-radio value="email" :disabled="!state.accountVerificationType.includes('email')" border>
                                    {{ t('Via email') }}
                                </el-radio>
                                <el-radio value="mobile" :disabled="!state.accountVerificationType.includes('mobile')" border>
                                    {{ t('Via mobile number') }}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item prop="mobile" >
                            <el-input
                                v-model="state.register.mobile"
                                :placeholder="
                                t('Please input field', {
                                    field: state.register.registerType == 'email' ? t('email') : t('mobile'),
                                })
                            "
                                :clearable="true"
                            >
                                <template #prefix>
                                    <Icon name="fa fa-user" size="16" color="var(--el-input-icon-color)" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="captcha" >
                            <el-row class="w100">
                                <el-col :span="16">
                                    <el-input
                                        v-model="state.register.captcha"
                                        :placeholder="t('Please input field', { field: t('Verification Code') })"
                                        autocomplete="off"
                                    >
                                        <template #prefix>
                                            <Icon name="fa fa-ellipsis-h" size="16" color="var(--el-input-icon-color)" />
                                        </template>
                                    </el-input>
                                </el-col>
                                <el-col class="captcha-box" :span="8">
                                    <el-button style="width: 100%;"
                                               @click="sendRegisterCaptchaPre"
                                               :loading="state.sendCaptchaLoading"
                                               :disabled="state.codeSendCountdown <= 0 ? false : true"
                                               type="primary"
                                    >
                                        {{ state.codeSendCountdown <= 0 ? t('send') : state.codeSendCountdown + t('seconds') }}
                                    </el-button>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item prop="password" >
                            <el-input
                                v-model="state.register.password"
                                :placeholder="t('Please input field', { field: t('New password') })"
                                show-password
                            >
                                <template #prefix>
                                    <Icon name="fa fa-unlock-alt" size="16" color="var(--el-input-icon-color)" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="nickname">
                            <el-input placeholder="请输入姓名"  size="large" v-model="state.form.nickname">
                                <template #prefix>
                                    <el-icon><User /></el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item  prop="group_id">
                            <el-select  class="group-select" v-model="state.form.group_id" placeholder="请选择分组">  <template #prefix>
                                <Icon name="fa fa-users" size="16" color="var(--el-input-icon-color)" />
                            </template>
                                <el-option
                                    v-for="item in state.userGroup"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button   round
                                         type="primary"
                                         size="large"
                                         style="width: 100%;margin-top: 105px;border-color: #2642bc;height:45px;
background: #066bf7;border-radius: 10px;font-weight: 600;font-size: 16px;color: #FFFFFF;" :loading="state.submitRegisterLoading" @click="onRegisterSubmitPre()" >
                                {{ t('second') }}
                            </el-button>
                        </el-form-item>
                        <div style="margin:0 auto;text-align: center;">
                            <el-button style="width: 125px;margin-top: 55px;background: #ffffff;
border: 1px solid #066bf7;border-radius: 39px;" round  class="register-find-btn"     type="primary"
                                       plain @click="switchTab('mobileLogin')">{{ t('Cancel') }}</el-button>
                        </div>
                    </el-form>
                </div>
                <div v-if="state.tab == 'Findpwd'">
                    <el-form
                        ref="retrieveFormRef"
                        @keyup.enter="onSubmitRetrieve()"
                        :rules="retrieveRules"
                        :model="state.retrievePasswordForm"
                    >
                    <el-form-item v-show="false">
                        <el-radio-group v-model="state.retrievePasswordForm.type" >
                            <el-radio value="email" :disabled="!state.accountVerificationType.includes('email')" border>
                                {{ t('Via email') }}
                            </el-radio>
                            <el-radio value="mobile" :disabled="!state.accountVerificationType.includes('mobile')" border>
                                {{ t('Via mobile number') }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item prop="mobile" >
                        <el-input
                            v-model="state.retrievePasswordForm.mobile"
                            :placeholder="
                                t('Please input field', {
                                    field: state.retrievePasswordForm.type == 'email' ? t('email') : t('mobile'),
                                })
                            "
                            :clearable="true"
                        >
                            <template #prefix>
                                <Icon name="fa fa-user" size="16" color="var(--el-input-icon-color)" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="captcha" >
                        <el-row class="w100">
                            <el-col :span="16">
                                <el-input
                                    v-model="state.retrievePasswordForm.captcha"
                                    :placeholder="t('Please input field', { field: t('Verification Code') })"
                                    autocomplete="off"
                                >
                                    <template #prefix>
                                        <Icon name="fa fa-ellipsis-h" size="16" color="var(--el-input-icon-color)" />
                                    </template>
                                </el-input>
                            </el-col>
                            <el-col class="captcha-box" :span="8">
                                <el-button style="width: 100%;"
                                    @click="sendRetrieveCaptchaPre"
                                    :loading="state.sendCaptchaLoading"
                                    :disabled="state.codeSendCountdown <= 0 ? false : true"
                                    type="primary"
                                >
                                    {{ state.codeSendCountdown <= 0 ? t('send') : state.codeSendCountdown + t('seconds') }}
                                </el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item prop="password" >
                        <el-input
                            v-model="state.retrievePasswordForm.password"
                            :placeholder="t('Please input field', { field: t('New password') })"
                            show-password
                        >
                            <template #prefix>
                                <Icon name="fa fa-unlock-alt" size="16" color="var(--el-input-icon-color)" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button   round
                                     type="primary"
                                     size="large"
                                     style="width: 100%;margin-top: 105px;border-color: #2642bc;height:45px;
background: #066bf7;border-radius: 10px;font-weight: 600;font-size: 16px;color: #FFFFFF;" :loading="state.submitRetrieveLoading" @click="onSubmitRetrieve()" >
                            {{ t('second') }}
                        </el-button>
                    </el-form-item>
                        <div style="margin:0 auto;text-align: center;">
                            <el-button style="width: 125px;margin-top: 55px;background: #ffffff;
border: 1px solid #066bf7;
border-radius: 39px;" round
                                       class="register-find-btn"     type="primary" plain @click="switchTab('mobileLogin')">{{ t('Cancel') }}</el-button>
                        </div>
                </el-form>
                </div>
            </div>
        </div>
    </div>

</template>
<script setup lang="ts">
import {isMobile} from '~/utils/common'
import type {FormItemRule, FormInstance} from 'element-plus'
import {sendEms, sendSms} from '~/api/common'
import {checkIn, retrievePassword} from '~/api/user/index'
import clickCaptcha from '~/composables/clickCaptcha'
import {useI18n} from 'vue-i18n'
import {onResetForm} from "~/utils/common";
import {ref} from "vue";
import {uuid} from "~/utils/random";
const {t} = useI18n()
let timer: NodeJS.Timeout
import {chatInfo} from '@/stores/chatinfo'
import {User} from "@element-plus/icons-vue";
useSeoMeta({
    title: '用户登录',
})
definePageMeta({
    layout: false,
    name: 'newLogin',
    noNeedLogin: true,
})
interface State {
    form: {
        tab: 'login' | 'register'
        email: string
        mobile: string
        username: string
        password: string
        captcha: string
        keep: boolean
        captchaId: string
        captchaInfo: string
        registerType: 'email' | 'mobile'
        group_id:number
        nickname:string
    }
    tab: 'mobileLogin' | 'captchaLogin' | 'passwordLogin' | 'Register'|'Login'|'Findpwd'
    actionType: 'mobile' | 'captcha' | 'password'
    loading: {
        login: boolean
        register: boolean
        retrievePassword: boolean
    }
    submitRegisterLoading:boolean
    showRegisterDialog:boolean
    submitRetrieveLoading:boolean
    login: {
        username: string
        mobile: string
        password: string
        captchaInfo: string
        captchaId: string
        smscode:string
        keep: boolean
        registerType:string
    }
    register: {
        registerType: 'email' | 'mobile'
        username: string
        password: string
        mobile: string
        email: string
        captcha: string
    }
    retrieveDialogWidth: number
    showRetrievePasswordDialog: boolean
    accountVerificationType: string[]
    retrievePasswordForm: {
        type: 'email' | 'mobile'
        account: string
        mobile: string
        captcha: string
        password: string
    }
    sendCaptchaLoading: boolean
    codeSendCountdown: number
    to: string
    userGroup:string[]
}
const passType=ref(false)
const showPass=()=>{
    passType.value=!passType.value
}

const isMobileDevice = ref(isMobile())
const route = useRoute()
const userInfo = useUserInfo()
const siteConfig = useSiteConfig()
const memberCenter = useMemberCenter()
const loginRef = ref<FormInstance>()
const registerRef = ref<FormInstance>()
const retrieveRef = ref<FormInstance>()
const retrieveFormRef = ref<FormInstance>()
const state: State = reactive({
    tab: 'mobileLogin',
    actionType: 'password',
    loading: {
        login: false,
        register: false,
        retrievePassword: false,
    },
    submitRegisterLoading:false,
    showRegisterDialog:false,
    login: {
        mobile: '',
        password: '',
        smscode:'',
        captchaInfo: '',
        captchaId: uuid(),
        keep: false,
    },
    register: {
        registerType: 'mobile',
        username: '',
        password: '',
        mobile: '',
        email: '',
        captcha: '',
    },
    retrieveDialogWidth: 36,
    submitRetrieveLoading:false,
    showRetrievePasswordDialog: false,
    accountVerificationType: [],
    retrievePasswordForm: {
        type: 'mobile',
        account: '',
        mobile: '',
        captcha: '',
        password: '',
    },form: {
        tab: 'login',
        email: '',
        mobile: '',
        username: '',
        password: '',
        captcha: '',
        keep: false,
        captchaId: uuid(),
        captchaInfo: '',
        registerType: 'email',
        group_id:0,
        nickname:''
    },
    sendCaptchaLoading: false,
    codeSendCountdown: 0,
    to: route.query.to as string,
})
const findPassword=()=>{
    state.showRetrievePasswordDialog = true
    state.tab="Findpwd"
}
const registerShow=()=>{
    state.showRetrievePasswordDialog = false
    state.showRegisterDialog = true
    state.tab="Register"
}
const loginRules: Partial<Record<string, FormItemRule[]>> = reactive({
    username: [buildValidatorData({name: 'required', title:'用户名'})],
    password: [buildValidatorData({
        name: 'required',
        title:'密码',
    }), buildValidatorData({name: 'password'})],
})
const switchLoginType = (loginType: any) => {
    state.actionType = loginType
    state.register.mobile = ''
    state.register.email = ''
}
const registerRules: Partial<Record<string, FormItemRule[]>> = reactive({
    password: [buildValidatorData({
        name: 'required',
        title: t('login.login.Password')
    }), buildValidatorData({name: 'password'})],
    mobile: [buildValidatorData({
        name: 'required',
        title: t('login.login.Mobile')
    }), buildValidatorData({name: 'mobile'})],
    captcha: [buildValidatorData({name: 'required', title: t('login.Captcha')})],
})

const retrieveRules: Partial<Record<string, FormItemRule[]>> = reactive({
    account: [buildValidatorData({name: 'required', title: t('login.Account name')})],
    captcha: [buildValidatorData({name: 'required', title: t('login.Captcha')})],
    password: [buildValidatorData({
        name: 'required',
        title: t('login.Password')
    }), buildValidatorData({name: 'password'})],
})

const onLoginSubmitPre = () => {
    loginRef.value?.validate((valid) => {
        if (!valid) return
        clickCaptcha(state.login.captchaId, (captchaInfo: string) => onLoginSubmit(captchaInfo))
    })
}
const onRegisterSubmitPre = () => {
    registerRef.value?.validate((valid) => {
        if (!valid) return
        clickCaptcha(state.login.captchaId, (captchaInfo: string) => onRegisterSubmit(captchaInfo))
    })
}
const onRegisterSubmit=(captchaInfo: string)=>{
    state.submitRegisterLoading = true
    state.login.captchaInfo = captchaInfo
    checkIn('post', {...state.login, tab: 'register'})
        .then((res) => {
            if (res.code != 1) return
            userInfo.dataFill(res.data.userInfo)
            if (state.to) return (location.href = state.to)
            navigateTo({path: res.data.routePath})
        })
        .finally(() => {
            state.submitRegisterLoading = false
        })
}
const onLoginSubmit = (captchaInfo: string) => {
    state.loading.login = true
    state.login.captchaInfo = captchaInfo
    checkIn('post', {...state.login, tab: 'login'})
        .then((res) => {
            if (res.code != 1) return
            userInfo.dataFill(res.data.userInfo)
            if (state.to) return (location.href = state.to)
            navigateTo({path: res.data.routePath})
        })
        .finally(() => {
            state.loading.login = false
        })
}

const switchTab = (type: State['tab']) => {
    state.tab = type
    if (type == 'Login') {
        loginRef.value?.resetFields()
        loginRef.value?.clearValidate()
    } else {
        registerRef.value?.resetFields()
        registerRef.value?.clearValidate()
    }
}

const sendRetrieveCaptchaPre = () => {
    if (state.codeSendCountdown > 0) return
    retrieveFormRef.value!.validateField('account').then((valid) => {
        console.log(valid,'.jiance2.')

        console.log(state.form.captchaId,'state.form.captchaId')
        if (!valid) return
        clickCaptcha(state.form.captchaId, (captchaInfo: string) => sendRetrieveCaptcha(captchaInfo))
    })
}

const sendRegisterCaptchaPre = () => {
    if (state.codeSendCountdown > 0) return
    registerRef.value!.validateField('account').then((valid) => {
        if (!valid) return
        clickCaptcha(state.form.captchaId, (captchaInfo: string) => sendRegisterCaptcha(captchaInfo))
    })
}
const sendRegisterCaptcha = (captchaInfo: string) => {
    state.sendCaptchaLoading = true
    const func = state.register.registerType == 'email' ? sendEms : sendSms
    func(state.register.mobile, 'user_register', {
        captchaInfo,
        captchaId: state.form.captchaId,
    })
        .then((res) => {
            if (res.code == 1) startTiming(60)
        })
        .finally(() => {
            state.sendCaptchaLoading = false
        })
}
const sendRetrieveCaptcha = (captchaInfo: string) => {
    state.sendCaptchaLoading = true
    const func = state.retrievePasswordForm.type == 'email' ? sendEms : sendSms
    func(state.retrievePasswordForm.account, 'user_retrieve_pwd', {
        captchaInfo,
        captchaId: state.form.captchaId,
    })
        .then((res) => {
            if (res.code == 1) startTiming(60)
        })
        .finally(() => {
            state.sendCaptchaLoading = false
        })
}


const onSubmitRetrieve = () => {
    if (!retrieveFormRef.value) return
    retrieveFormRef.value.validate((valid) => {
        if (valid) {
            state.submitRetrieveLoading = true
            retrievePassword(state.retrievePasswordForm)
                .then((res) => {
                    console.log(res,'<><>')
                    state.submitRetrieveLoading = false
                    if (res.code == 1) {
                        state.showRetrievePasswordDialog = false
                        endTiming()
                        onResetForm(retrieveFormRef.value)
                    }
                })
                .catch(() => {
                    state.submitRetrieveLoading = false
                })
        }
    })
}

const startTiming = (seconds: number) => {
    state.codeSendCountdown = seconds
    timer = setInterval(() => {
        state.codeSendCountdown--
        if (state.codeSendCountdown <= 0) {
            endTiming()
        }
    }, 1000)
}
const endTiming = () => {
    state.codeSendCountdown = 0
    clearInterval(timer)
}

const dialogSize = () => {
    if (import.meta.server) return
    let clientWidth = document.documentElement.clientWidth
    let width = 36
    if (clientWidth <= 790) {
        width = 92
    } else if (clientWidth <= 910) {
        width = 56
    } else if (clientWidth <= 1260) {
        width = 46
    }
    state.retrieveDialogWidth = width
}
checkIn('get').then((res) => {
    if (res.code != 1) return
    state.accountVerificationType = res.data.accountVerificationType
    state.retrievePasswordForm.type = res.data.accountVerificationType.length > 0 ? res.data.accountVerificationType[0] : ''
    state.userGroup=res.data.user_group
    state.form.group_id=res.data.group_id
})

onMounted(() => {
    dialogSize()
    useEventListener(window, 'resize', dialogSize)
    if (route.query.type == 'register') state.tab = 'Register'
})
onUnmounted(() => {
    endTiming()
})
</script>
<style scoped>
@import url('https://b.yzcdn.cn/wsc-pc-account/login_b97b5429.css');
</style>
<style scoped lang="scss">
.mob-loginbox{
    background: #ffffff;border-radius: 30px;    margin-top: -25px;padding: 40px;
    :deep(.el-input__wrapper){
        border-radius: 10px;
    }
}
.register-find-btn{
    &:hover{
        color:#1d6bf3;
    }
}
.pc-loginbox{
    :deep(.el-input-group__append){
        box-shadow:none;
        background-color:#fff
    }
    :deep(.el-form-item__label){
        font-weight: 600;
        font-size: 18px;
        color: #666666;
    }
    :deep(.el-input__wrapper){
        background-color: #fff;
        border-bottom: 1px solid rgb(143, 158, 171);
        box-shadow: none;
        border-radius: 0;
    }
    :deep(.el-form-item.is-error .el-input__wrapper){
        box-shadow: none;
    }
}
.attention-tips{
    height: 33px;
    font-weight: 600;
    font-size: 24px;
    color: #333333;
    line-height: 33px;
    text-align: center;
    margin-top: 20px;
    font-style: normal;
}
.switch-language {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1;
}
.form-item-icon {
    height: auto;
}
.login {background: #EDF1F4;
    position: absolute;
    top: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;

    footer {
        font-size: 14px;
        text-align: right;
    }

    .login-box {
        display: flex;
        flex-direction: row-reverse;
        overflow: hidden;
        width: 1320px;
        // background: var(--ba-bg-color-overlay);
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 1;
        box-sizing: border-box;
        padding: 66px 30px;
        font-size: 18px;

        &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            filter: blur(10px);
            z-index: -1;
        }
    }

    .head {
        background: #162cb0;
        border-radius: 20px;
        width: 660px;
        img {
            display: block;
            width: 430px;
            margin: 0 auto;
            user-select: none;
        }
    }

    .form {
        position: relative;
        border-radius: 20px;
        width: 660px;
        height: 660px;
        background: #FFFFFF;
        right: -40px;

        .profile-avatar {
            display: block;
            position: absolute;
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 4px solid var(--ba-bg-color-overlay);
            top: -50px;
            right: calc(50% - 50px);
            z-index: 2;
            user-select: none;
        }

        .content {
            padding: 40px 40px 40px 40px;
        }

        .submit-button {
            width: 100%;
            letter-spacing: 2px;
            font-weight: 300;
            margin-top: 15px;
            --el-button-bg-color: var(--el-color-primary);
        }
    }
}
@media screen and (max-width: 720px) {
    .login {
        display: flex;
        align-items: center;
        justify-content: center;

        .login-box {
            width: 340px;
            margin-top: 0;
        }
    }
}
.chang-lang :deep(.el-dropdown-menu__item) {
    justify-content: center;
}
.content :deep(.el-input__prefix) {
    display: flex;
    align-items: center;
}
@media screen and (max-height: 800px) {
    .login .login-box {
        margin-bottom: 0;
    }
}
.group-select{
    :deep(.el-select__wrapper){
        border-radius: 10px;
    }
}
</style>
